<!DOCTYPE html>
<html>
<head>
<title>Physics Diagram of a Rotating Cone</title>
</head>
<body>
<canvas id="myCanvas" width="400" height="450" style="border:1px solid #d3d3d3;"></canvas>
<script>
    const canvas = document.getElementById('myCanvas');
    const ctx = canvas.getContext('2d');

    // --- Style and Font Settings ---
    ctx.lineWidth = 2;
    ctx.strokeStyle = 'black';
    ctx.fillStyle = 'black';
    const baseFont = '20px Times New Roman';
    const italicFont = 'italic 20px Times New Roman';
    const subscriptFont = '14px Times New Roman';
    ctx.font = baseFont;
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';

    // --- Geometric Parameters ---
    const cx = 200;
    const apexY = 100;
    const h = 200;
    const R = 120;
    const baseY = apexY + h;
    const baseRy = 30; // Vertical radius for ellipse perspective

    // --- Draw Central Axis ---
    ctx.beginPath();
    ctx.moveTo(cx, apexY - 40);
    ctx.lineTo(cx, baseY);
    ctx.stroke();

    // --- Draw Cone ---
    // Cone Sides (Slant Height)
    ctx.beginPath();
    ctx.moveTo(cx, apexY);
    ctx.lineTo(cx - R, baseY);
    ctx.moveTo(cx, apexY);
    ctx.lineTo(cx + R, baseY);
    ctx.stroke();

    // Cone Base
    // Dashed back half of the ellipse
    ctx.beginPath();
    ctx.setLineDash([4, 4]);
    ctx.ellipse(cx, baseY, R, baseRy, 0, Math.PI, 2 * Math.PI);
    ctx.stroke();

    // Solid front half of the ellipse
    ctx.beginPath();
    ctx.setLineDash([]); // Reset to solid line
    ctx.ellipse(cx, baseY, R, baseRy, 0, 0, Math.PI);
    ctx.stroke();

    // --- Draw Groove and Bead 'm' ---
    // The groove is a straight line on the cone surface from apex to base.
    // We'll draw it along the left generator line as shown in the image.
    const grooveStartX = cx;
    const grooveStartY = apexY;
    const grooveEndX = cx - R;
    const grooveEndY = baseY;
    
    // The bead 'm' is positioned along the groove.
    const beadFraction = 0.4; // Position of the bead along the groove
    const beadX = grooveStartX + beadFraction * (grooveEndX - grooveStartX);
    const beadY = grooveStartY + beadFraction * (grooveEndY - grooveStartY);

    // Draw the groove line up to the bead
    ctx.beginPath();
    ctx.moveTo(grooveStartX, grooveStartY);
    ctx.lineTo(beadX, beadY);
    ctx.stroke();

    // Draw the rest of the groove line from the bead to the base
    ctx.beginPath();
    ctx.moveTo(beadX, beadY);
    ctx.lineTo(grooveEndX, grooveEndY);
    ctx.stroke();

    // Draw the bead
    ctx.beginPath();
    ctx.arc(beadX, beadY, 4, 0, 2 * Math.PI);
    ctx.fill();
    
    // Label 'm' for the bead
    ctx.font = italicFont;
    ctx.fillText('m', beadX + 15, beadY + 5);

    // --- Draw Labels and Arrows ---

    // Label 'h' for height
    ctx.font = baseFont;
    const h_label_x = 70;
    ctx.beginPath();
    ctx.moveTo(h_label_x, apexY);
    ctx.lineTo(h_label_x, baseY);
    ctx.moveTo(h_label_x - 5, apexY);
    ctx.lineTo(h_label_x + 5, apexY);
    ctx.moveTo(h_label_x - 5, baseY);
    ctx.lineTo(h_label_x + 5, baseY);
    ctx.stroke();
    ctx.font = italicFont;
    ctx.fillText('h', h_label_x - 15, apexY + h / 2);

    // Label 'R' for radius
    ctx.beginPath();
    ctx.moveTo(cx, baseY);
    ctx.lineTo(cx + R, baseY);
    ctx.stroke();
    ctx.font = baseFont;
    ctx.fillText('R', cx + R / 2, baseY - 15);
    
    // Arrow and Label for angular velocity 'ω₀' (counter-clockwise)
    const omega_y = apexY - 20;
    const omega_r = 25;
    const startAngle = Math.PI * 0.8;
    const endAngle = Math.PI * 0.2;
    ctx.beginPath();
    ctx.arc(cx, omega_y, omega_r, startAngle, endAngle, true); // true for counter-clockwise
    ctx.stroke();

    // Arrowhead for ω₀
    const arrowX = cx + omega_r * Math.cos(endAngle);
    const arrowY = omega_y + omega_r * Math.sin(endAngle);
    const tangent = endAngle + Math.PI / 2;
    ctx.beginPath();
    ctx.moveTo(arrowX, arrowY);
    ctx.lineTo(arrowX - 8 * Math.cos(tangent - Math.PI/6), arrowY - 8 * Math.sin(tangent - Math.PI/6));
    ctx.moveTo(arrowX, arrowY);
    ctx.lineTo(arrowX - 8 * Math.cos(tangent + Math.PI/6), arrowY - 8 * Math.sin(tangent + Math.PI/6));
    ctx.stroke();

    // Label ω₀
    ctx.font = italicFont;
    ctx.fillText('ω', cx + 42, omega_y + 5);
    ctx.font = subscriptFont;
    ctx.fillText('0', cx + 52, omega_y + 10);
    
    // Arrow and Label for gravity 'g'
    const g_arrow_x = 40;
    ctx.beginPath();
    ctx.moveTo(g_arrow_x, apexY - 40);
    ctx.lineTo(g_arrow_x, apexY);
    // Arrowhead
    ctx.moveTo(g_arrow_x, apexY);
    ctx.lineTo(g_arrow_x - 5, apexY - 8);
    ctx.moveTo(g_arrow_x, apexY);
    ctx.lineTo(g_arrow_x + 5, apexY - 8);
    ctx.stroke();
    ctx.font = italicFont;
    ctx.fillText('g', g_arrow_x - 15, apexY - 20);

    // --- Draw Figure Caption ---
    ctx.font = baseFont;
    ctx.fillText('Fig. 1.141.', cx, baseY + 100);

</script>
</body>
</html>